<template>
    <n-flex justify="center">
        <div class="w-2/3 flex flex-col my-20 ">
            <span class="text-7xl font-extrabold">
                定制你的策略
            </span>
            <span class="text-7xl font-extrabold  my-4">
                从<span class="text-sky-800">《场景》</span>驱动开始
            </span>
            <span class="text-2xl text-gray-500">
                在你定制的场景下，基于你所标记的事件实例，定制属于你自己的策略
            </span>
        </div>
        <div class="flex justify-center items-center">
            <div class="w-1/2"> <!-- 容器占50%宽度 -->
                <n-image width="100%" src="/image/structure.jpg" />
            </div>
        </div>

        <div class="w-full flex flex-col items-center justify-center bg-gray-100">
            <div class="text-5xl my-12 text-teal-800">
                只需三步，开启你的回测旅程
            </div>
            <div class="w-2/3 flex">
                <div v-for="(i, index) in data" :key="index"
                    class="w-96 m-2 h-120 bg-slate-50 rounded-3xl flex-col flex justify-center overflow-hidden ">
                    <div class="w-full flex justify-center">
                        <div
                            class="w-32 h-32 m-4  font-extrabold flex items-center justify-center text-7xl rounded-full border-8 border-black border-solid">
                            {{ (index + 1) }}
                        </div>
                    </div>
                    <div class="my-4 flex flex-col justify-center">
                        <div class="w-full flex justify-center ">
                            <span class="text-3xl ">
                                {{ i.title }}
                            </span>
                        </div>

                    </div>
                    <div class="flex-grow bg-slate-200  p-4">
                        <span class="text-xl">{{ i.content }}</span>
                    </div>
                </div>

            </div>
        </div>


    </n-flex>
</template>
<style scoped>

</style>
<script setup>

const data = [
    {
        title: '场景配置',
        content: '场景是你定制策略的起点，在场景中，你可以标记事件实例，从而定制你的策略'
    },
    {
        title: '策略评价',
        content: '在你的场景下，通过配置初始投资等基本信息、选择回测类别，并基于配置的属性定制属于你的策略，最终进行策略评估，找到属于你的完美策略'
    },
    {
        title: '分析预测',
        content: '基于配置好的场景与实例，针对性进行分析'
    }
]
</script>